// 导入基础样式文件
@import './variables.scss';
@import './transition.scss';
@import './svgicon.scss';
@import './sidebar.scss';

// 全局样式
body {
  height: 100%;
  min-width: 1000px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

// 基础样式
* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
  
  &:focus,
  &:hover {
    color: inherit;
    outline: none;
    text-decoration: none;
  }
}

div:focus {
  outline: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

// 组件样式
.avatar-uploader .el-upload {
  border: 1px solid #d8dde3;
  border-radius: 4px;
  cursor: pointer;
  
  &:hover {
    border-color: #333;
  }
  
  &.is-success {
    border-color: #02b6fd;
  }
}

.el-button--primary.continue {
  background-color: #333333;
  border-color: #333333;
  color: #ffffff;
  
  &:hover, &:focus {
    background-color: #333333;
    border-color: #333333;
    color: #ffffff;
  }
  
  &:active {
    background-color: #333333;
    border-color: #333333;
    color: #ffffff;
  }
}

.login-btn {
  width: 100%;
  height: 40px;
  background: #02b6fd !important;
  border-color: #02b6fd !important;
  color: #fff !important;
  
  &:hover {
    color: #333 !important;
  }
}

// 日期选择器样式
.el-date-editor .el-range-separator {
  padding: 0 8px;
  width: auto;
}

// 添加菜品按钮样式
.addDish .addBut {
  background-color: #333333 !important;
  border-color: #333333 !important;
  color: #ffffff !important;
  
  &:hover {
    background-color: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
  }
}

// 修改套餐页面的添加菜品按钮样式（编辑状态）
.addDish .addBut.edit-mode {
  background-color: #02b6fd !important;
  border-color: #02b6fd !important;
  color: #ffffff !important;
  
  &:hover {
    background-color: #02b6fd !important;
    border-color: #02b6fd !important;
    color: #ffffff !important;
  }
}

// 修改套餐页面的份数输入框样式
.number-input.el-input-number {
  width: 180px !important;
  
  .el-input__inner {
    text-align: center !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  
  .el-input-number__decrease, 
  .el-input-number__increase {
    width: 40px !important;
    height: 100% !important;
    line-height: 100% !important;
  }
}

// 表格中的份数输入框样式
.el-table {
  .el-input-number {
    width: 120px !important;
    
    .el-input__inner {
      padding: 0 30px !important;
      text-align: center !important;
      border-color: #333333 !important;
      width: 120px !important;
    }
    
    .el-input-number__decrease, 
    .el-input-number__increase {
      background-color: #fff !important;
      border-color: #333333 !important;
      line-height: normal !important;
      
      &:hover {
        color: #333333 !important;
      }
    }
  }
}

// 添加口味按钮样式
.flavorBox .addBut {
  background-color: #333333;
  border-color: #333333;
  color: #ffffff;
  
  &:hover {
    background-color: #333333;
    border-color: #333333;
    color: #ffffff;
  }
} 